<html>
<head>
  <style>
  
    div.row { 
      flow:horizontal; 
      border-spacing:1em;
    }
  
    form.window
    {
      prototype: Widget url(desktop-widgets.js);
      height:110px;  
      width:110px;
			padding:4px;
      border-radius:19px;
      border:2px solid;
      background:gold;
    }
    
    form.window[placement="left"] { border-radius:19px 0 0 19px; }
    form.window[placement="top"] { border-radius:19px 19px 0 0; }
    form.window[placement="bottom"] { border-radius:0 0 19px 19px; }
    form.window[placement="right"] { border-radius:0 19px 19px 0; }
    
		form.window button.go-home 
		{
		  display:none;
			transition:none;
		}
		form.window[placement] button.go-home 
		{
		  display:block;
		}
		
    form.window > caption
    {
      width:*;
      line-height:1.4em;
      padding:4px 10px;
      cursor:move;
    }
    form.window > div
    {
      width:*;
      height:*;
      margin:0 6px 6px 6px;
      background-color:#fff;
      border-radius:16px;
      padding:8px;
    }
    
    
    //form.window:not(:popup) .when-airborn { display:none; }
    //span.when-airborn { color:red; }
  </style>  
  
</head>
<body>
  Try to move the "window" outside of the view.
  
  <ol>
    <li>If element ends moving inside the view it "returns" back in its static place.</li>
    <li>If element is moved outside the view it is docked to the side of the window. <code>Element.move(..., #attached-window)</code></li>
    <li>If element is moved far enough from the view it gets detached from the view - moving the view is not causing such element to move in sync with the view. <code>Element.move(..., #detached-window)</code></li>
  </ol>
  
  <div .row>
    <form.window #test>
      <caption>Window #1</caption>
      <div>
        <text.status>.</text>
        <button .go-home>Back home</button>
      </div>
    </form>
    <form.window style="left:150px">
      <caption>Window #2</caption>
      <div>
        <text.status>.</text>
        <button .go-home>Back home</button>
      </div>
    </form>
    <form.window style="left:300px">
      <caption>Window #3</caption>
      <div>
        <text.status>.</text>
        <button .go-home>Back home</button>
      </div>
    </form>
  </div>

</body>
</html>
